<template>
  <div>
    <h3>{{webName + '-' +indexTitle}}</h3>
    <h3>{{webName}}-{{indexTitle}}</h3>
<!--    getWebTitle()方法要加（）-->
    <h3>{{getWebTitle()}}</h3>
    <h3>{{webTitle}}</h3>
    <h3>{{getWebName()}}</h3>
    <h3>总价：{{total}}</h3>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
      webName:'这是网站名称',
      indexTitle:'这是首页标题',
      carts:[
        {name:'商品',num:2,price:10},
        {name:'商品1',num:3,price:10},
        {name:'商品2',num:4,price:10},
        {name:'商品3',num:5,price:10},
      ]
    }
  },
  computed:{
    webTitle:{
      set(values){
        let arr = values.split('^^^^');
        this.webName = arr[0];
        this.indexTitle = arr[1];
      },
      get(){
        return this.webName + '@@@@@@' + this.indexTitle
      }
    },
    total:{
      get(){
        /**
         * reduce汇总  详情用法
         * 第二个参数为初始值 一般设置为0
         * arr.reduce(callback,[initialValue])
         * 如果不设置第二个参数 会从索引为1开始
         * https://blog.csdn.net/weixin_29832179/article/details/112413878
         */
        return this.carts.reduce((prv,cur)=>prv+cur.price*cur.num,0)
      }
    }
  },
  methods:{
    getWebTitle(){
      return this.webName + '-' + this.indexTitle;
    },
    getWebName(){
      // 给计算属性computed中webTitle的set(values)用的
      this.webTitle = 'Web标题 ^^^^ 首页标题';
      return this.webName + '%%%%%1%%%%%' + this.indexTitle;
    }
  }
}
</script>

<style scoped>

</style>